<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>어디서나 펼쳐지는 내비게이션</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>

<style>

*{	margin:0; padding:0;	}

div#container {
	width:600px;
	height:200px;
	left:0px;
	top:0px;
	position:relative;
}
				
div#home {
	width:50px;
	height:200px;
	background:#FF9999;
	left:0px;
	top:0px;
	position:absolute;
	z-index:2;
}
		   
ul { 
	width:600px; 
	height:200px;
	list-style:none;
	left:-600px;
	top:0px;
	position:absolute;
	z-index:1;
}
	 
ul li {
	width:200px;
	height:200px;
	float:left;
	opacity:0.7;
}


</style>

</head>

<body>



<div id="container">
	<div id = "home">HOME </div>
  
	<ul id ="menu">     
		<li><img src="th_bg1.jpg" /></li>
		<li><img src="th_bg2.jpg" /></li>
		<li><img src="th_bg3.jpg" /></li>
	</ul>
</div>



<script>
   
$('#home').toggle(
	function() {
		$('ul').stop().animate({left:"50px"} ,500 );
	},
	 function() {
		$('ul').stop().animate({left:"-600px"} ,500);
	}
);
					
$('li').hover(
	function() {
		$(this).animate({opacity:1},300)
	}, function() {
		$(this).animate({opacity:0.7},300)
	}
);
					
				
$('#home').mousemove( function(e){
	var pos = e.pageY -  parseInt($('#container').css("height"))/2+ "px";
	$('#container').css({"top":pos});
});

	 
</script>
</body>
</html>
